<template>
  <div  id='map' class="hello">
  </div>
</template>

<script>
  import 'ol/ol.css';
  import {Map, View} from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';
  import  {transform }from 'ol/proj'
  import  Tile from 'ol/layer/Tile'
  import  XYZ from 'ol/source/XYZ'
  import TileDebug from 'ol/source/TileDebug';

  export default {
    data() {
      return {
        activeIndex: '1',
      };
    },
    created () {
      console.log('home实例')
    },
    mounted:function(){
      //view
      var view=new View({
        // 设置成都为地图中心
        center: transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
      });
      //var osm=new ol.layer.Tile({source: new ol.source.OSM()});
      // map
      const map = new Map({
        layers: [
          this.getTdtLayer("vec_w"),
          this.getTdtLayer("cva_w"),

        ],
        view:view,
        target: 'map'
      });
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      getTdtLayer(lyr) {
        let urls=[];
        for(let i=0;i<8;i++)
        {
          //urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=07c3369864c03fb6a162ac560811db9b")
          //urls.push( "http://t"+i+".tianditu.gov.cn/" + lyr + "/wmts?tk=&X={x}&Y={y}&L={z}")
          urls.push( "http://t"+i+".tianditu.gov.cn/"+lyr+"/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER="+lyr.split("_")[0]+"&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=07c3369864c03fb6a162ac560811db9b")
          //urls.push( "https://t3.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={y}&TILEROW={x}&TILEMATRIX={z}&tk=2ce94f67e58faa24beb7cb8a09780552")


        }
                let layer = new Tile({
                  source: new XYZ({
                    urls:urls
                  })
                });

/*        let layer = new Tile({
          source:new XYZ({
            tileUrlFunction: function (coordinate) {
              //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
              var x = coordinate[1];
              var y = -coordinate[2] -1;
              var z = coordinate[0];
              //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
              return 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX='+z+'&TILEROW='+y+'&TILECOL='+x+'&tk=07c3369864c03fb6a162ac560811db9b"';//这里可以修改地图路径
            },
            projection: 'EPSG:3857'
          })
        });*/
        return layer;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
